import React, {Component} from 'react'
import {bindActionCreators} from 'redux'
import {hashHistory} from 'react-router'
import {connect} from 'react-redux'
import SearchBar from '../components/SearchBar'
import SearchResult from '../components/SearchResult'
import SearchHistory from '../components/SearchHistory'

import {actions} from '../actions'

// Import styles from '../sass/App'

@connect(
  state => ({

    // searchList: state.search.searchList,
    // searchHistory: state.search.searchHistory,
    // nextPage: state.search.nextPage
    data: state.search
  }),
  dispatch => ({
    ...bindActionCreators({
      resetSearch: actions.resetSearch,
      fetchSearchList: actions.fetchSearchList,
      getSearchList: actions.getSearchList,
      clearSearchHistory: actions.clearSearchHistory
    }, dispatch)
  })
)

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      showHistory: false,
      isFetching: false,
      keyword: null
    }
  }

  componentWillMount() {
    this.props.hideFooter(true)
  }

  componentDidMount() {
    this.props.loadPosition('csxSearch', '.wrapper')
  }

  componentWillUnmount() {
    this.props.hideFooter(false)
    this.props.savePosition('csxSearch', '.wrapper')
  }

  _scrollHandle = (el) => {
    let target = el.target,
        gap = 50

    if(target.scrollTop === 0){
      return
    }

    if((target.scrollTop + target.offsetHeight) >= (target.scrollHeight - gap) && !this.state.isFetching){
      this.props.fetchSearchList({
        keyword: this.state.keyword,
        currentPage: this.props.data.nextPage
      }).then(() => {
        this.setState({
          isFetching: false
        })
      })

      this.setState({
        isFetching: true
      })
    }
  }

  _showHistory = (status = false) => {
    setTimeout(() => {
      this.setState({showHistory: status})
    }, 10)
  }

  _getSearchList = e => {
    e && e.preventDefault()

    this.props.resetSearch()

    let searchInput = document.getElementById('search'),
        keyword = searchInput.value.trim()

    this.setState({
      keyword: keyword
    })

    searchInput.blur()

    keyword && this.props.fetchSearchList({
      keyword,
      currentPage: 0
    }).then(() => {
      this.setState({
        isFetching: false
      })
    })

    this._showHistory(false)
  }

  _searchByHistroy = keyword => {
    document.getElementById('search').value = keyword

    this._getSearchList()
  }

  _clearHistory = () => {
    document.getElementById('search').focus()
    this.props.clearSearchHistory()
  }

  _cancelSearch = () => {
    hashHistory.goBack()
    this.props.resetSearch()
  }



  render() {
    const {data: {searchList, searchHistory}, clearSearchHistory, fetchAddToCart} = this.props

    return (
        <section style={{height: '100%'}}>
            <SearchBar
                getSearchList={this._getSearchList}
                showHistory={this._showHistory}
                cancelSearch={this._cancelSearch}
            />
          <section className="wrapper J-scroll" onScroll={this._scrollHandle.bind(this)}>
            {
              !this.state.showHistory && searchList.length &&
              <SearchResult
                searchList={searchList}
                fetchAddToCart={fetchAddToCart}
              />
            }
            {
              this.state.showHistory &&
              <SearchHistory
                searchHistory={searchHistory}
                searchByHistroy={this._searchByHistroy}
                clearSearchHistory={this._clearHistory}
              />
            }
          </section>
        </section>
    )
  }
}
